<div class="mb-2 flex gap-2 flex-wrap justify-content-end">
    <div class="flex align-items-center flex-auto">
        <div *ngIf="filterTextFormatErrors?.length > 0">
            <small *ngFor="let err of filterTextFormatErrors" class="p-error block">{{ err }}</small>
        </div>
    </div>
    <a
        label="New Host"
        icon="pi pi-plus"
        class="block p-button p-button-primary no-underline"
        type="button"
        routerLink="/dhcp/hosts/new"
        pButton
    ></a>
    <p-button
        label="Refresh List"
        icon="pi pi-refresh"
        styleClass="block p-button-primary no-underline"
        (onClick)="reloadData(hostsTable)"
    ></p-button>
</div>
<p-table
    id="hosts-table"
    #hostsTable
    [value]="dataCollection"
    [paginator]="true"
    [rows]="10"
    [lazy]="true"
    [loading]="dataLoading"
    (onLazyLoad)="loadData($event)"
    [lazyLoadOnInit]="false"
    (onStateRestore)="stateRestored($event, hostsTable)"
    (onStateSave)="stateSaved(hostsTable)"
    (onFilter)="onFilter()"
    [totalRecords]="totalRecords"
    [rowsPerPageOptions]="[10, 30, 100]"
    [showCurrentPageReport]="true"
    stateStorage="session"
    [stateKey]="stateKey"
    [currentPageReportTemplate]="currentPageReportTemplate"
    styleClass="p-datatable-striped"
>
    <ng-template pTemplate="caption">
        <p-panel [toggleable]="true">
            <ng-template pTemplate="header">
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-filter"></i>
                    <span class="font-bold">Filters</span>
                    <p-tag
                        icon="pi pi-check"
                        value="Filter applied"
                        severity="success"
                        *ngIf="hasFilter(hostsTable)"
                        [rounded]="true"
                    ></p-tag>
                    <app-help-tip subject="filtering" id="filtering-help-button" width="40vw">
                        <p>
                            Hosts in the table below can be filtered by entering a text in the search box; the table
                            shows all hosts matching the filter text. Currently supported fields for such filtering are:
                        </p>
                        <ul>
                            <li>Identifier</li>
                            <li>Identifier Type</li>
                            <li>Address</li>
                            <li>Hostname</li>
                        </ul>
                        <p>
                            Hosts can be filtered by their identifier value, e.g. <b>00:01:02:03:04:05</b>; a part of
                            the identifier (e.g. filter by the initial 3 bytes of a MAC address that denotes OUI, a
                            unique identifier of the vendor, effectively showing all devices produced by the same
                            vendor); or identifier type (e.g. <b>hw-address</b> to show all reservations made by a MAC
                            address).
                        </p>
                        <p>
                            Hosts can be also filtered by a full or partial IP address. For example, all reservations in
                            a 192.0.2.0/24 subnet can found by entering
                            <b>192.0.2</b> as the filter text.
                        </p>
                        <p>
                            Global hosts, i.e. the hosts valid for all subnets, can be filtered out by using
                            <b>Global checkbox</b> filter. Setting it to <b>false</b> state will cause all other hosts
                            to be returned, i.e. those that are associated with certain subnets.
                        </p>
                        <p>
                            Hosts with inconsistent DHCP configurations can be filtered by using
                            <b>Conflict checkbox</b> filter. It returns the hosts whose configurations are repeated in
                            the configuration file and host database with some differences. Conversely, to display all
                            hosts lacking the configuration conflicts, set the checkbox to <b>false</b> state.
                        </p>
                        <p>
                            In addition, hosts can be filtered by an explicitly selected field using text input filters.
                            Currently supported fields for explicit filtering are:
                        </p>
                        <ul>
                            <li>Kea App Id - the ID of the Kea App used by Stork.</li>
                            <li>Subnet Id - the subnet ID used by Stork.</li>
                            <li>Kea Subnet Id - the subnet ID assigned to the subnet in the Kea configuration.</li>
                        </ul>
                        <p>
                            It is possible to filter the hosts by multiple fields. Currently, all provided filtering
                            conditions are joined using logical AND.
                        </p>
                    </app-help-tip>
                </div>
            </ng-template>
            <div class="flex flex-wrap gap-3 row-gap-5 mt-3 align-items-center">
                <button
                    pButton
                    label="Clear"
                    [class.p-button-warning]="hasFilter(hostsTable)"
                    [class.p-button-secondary]="!hasFilter(hostsTable)"
                    icon="pi pi-filter-slash"
                    (click)="clearFilters(hostsTable)"
                    [disabled]="!hasFilter(hostsTable)"
                ></button>
                <div class="flex-auto"></div>
                <p-columnFilter field="appId" matchMode="equals" [showMenu]="false" [showClearButton]="!hasPrefilter()">
                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                        <span class="p-float-label">
                            <p-inputNumber
                                inputId="app-id"
                                mode="decimal"
                                [useGrouping]="false"
                                (onInput)="filter($event.value)"
                                [ngModel]="value"
                                [disabled]="hasPrefilter()"
                            ></p-inputNumber>
                            <label for="app-id">Kea App Id</label>
                        </span>
                    </ng-template>
                </p-columnFilter>
                <p-columnFilter field="subnetId" matchMode="equals" [showMenu]="false">
                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                        <span class="p-float-label">
                            <p-inputNumber
                                inputId="subnet-id"
                                mode="decimal"
                                [useGrouping]="false"
                                (onInput)="filter($event.value)"
                                [ngModel]="value"
                            ></p-inputNumber>
                            <label for="subnet-id">Subnet Id</label>
                        </span>
                    </ng-template>
                </p-columnFilter>
                <p-columnFilter field="keaSubnetId" matchMode="equals" [showMenu]="false">
                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                        <span class="p-float-label">
                            <p-inputNumber
                                inputId="kea-subnet-id"
                                mode="decimal"
                                [useGrouping]="false"
                                (onInput)="filter($event.value)"
                                [ngModel]="value"
                            ></p-inputNumber>
                            <label for="kea-subnet-id">Kea Subnet Id</label>
                        </span>
                    </ng-template>
                </p-columnFilter>
                <div class="flex align-items-center gap-1">
                    Global
                    <p-columnFilter type="boolean" field="isGlobal" matchMode="equals"></p-columnFilter>
                </div>
                <div class="flex align-items-center gap-1">
                    Conflict
                    <p-columnFilter type="boolean" field="conflict" matchMode="equals"></p-columnFilter>
                </div>
                <p-columnFilter field="text" matchMode="contains" [showMenu]="false">
                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                        <span class="p-input-icon-left">
                            <i class="pi pi-search"></i>
                            <input
                                pInputText
                                type="text"
                                (input)="filter($event.target.value)"
                                [ngModel]="value"
                                placeholder="Search IP or identifier"
                            />
                        </span>
                    </ng-template>
                </p-columnFilter>
            </div>
        </p-panel>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 28%">DHCP Identifiers</th>
            <th style="width: 18%">IP Addresses</th>
            <th style="width: 14%">IPv6 Prefixes</th>
            <th style="width: 14%">Hostname</th>
            <th style="width: 12%">Global/Subnet</th>
            <th style="width: 14%">App Name</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <tr>
            <td colspan="6">
                No hosts found.
                <span *ngIf="hasFilter(hostsTable)">
                    Try to clear filtering.
                    <button
                        pButton
                        label="Clear"
                        class="p-button-outlined"
                        icon="pi pi-filter-slash"
                        (click)="clearFilters(hostsTable)"
                    ></button>
                </span>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-h>
        <tr id="host-row-{{ h.id }}">
            <td>
                <app-identifier
                    *ngFor="let i of h.hostIdentifiers"
                    [label]="i.idType"
                    [hexValue]="i.idHexValue"
                    [defaultHexFormat]="i.idType === 'hw-address'"
                    link="/dhcp/hosts/{{ h.id }}"
                >
                </app-identifier>
            </td>
            <td>
                <app-entity-link
                    *ngFor="let r of h.addressReservations"
                    entity="host"
                    [showEntityName]="false"
                    [attrs]="{ id: h.id, label: r.address }"
                ></app-entity-link>
            </td>
            <td>
                <app-entity-link
                    *ngFor="let r of h.prefixReservations"
                    entity="host"
                    [showEntityName]="false"
                    [attrs]="{ id: h.id, label: r.address }"
                ></app-entity-link>
            </td>
            <td>
                {{ h.hostname }}
            </td>
            <td *ngIf="h.subnetId; else globalSubnetBlock">
                <app-entity-link
                    entity="subnet"
                    [showEntityName]="false"
                    [attrs]="{ id: h.subnetId, subnet: h.subnetPrefix }"
                ></app-entity-link>
            </td>
            <ng-template #globalSubnetBlock>
                <td>global</td>
            </ng-template>
            <td>
                <div *ngFor="let lhs of localHostsGroupedByApp[h.id]" class="flex align-items-baseline">
                    <!-- Hyperlink to the host page -->
                    <a routerLink="/apps/kea/{{ lhs[0].appId }}" class="block white-space-nowrap"
                        >{{ lhs[0].appName }}
                    </a>
                    <!-- Data source labels -->
                    <app-host-data-source-label
                        *ngFor="let lh of lhs"
                        class="ml-2 mt-1"
                        [dataSource]="lh.dataSource"
                    ></app-host-data-source-label>
                    <!-- Conflict label -->
                    <p-tag
                        *ngIf="getLocalHostsState(lhs) === 'conflict'"
                        class="ml-2 mt-1"
                        value="conflict"
                        severity="danger"
                        pTooltip="The host is configured differently in the configuration file and host database."
                    ></p-tag>
                    <!-- Duplicate label -->
                    <p-tag
                        *ngIf="getLocalHostsState(lhs) === 'duplicate'"
                        class="ml-2 mt-1"
                        value="duplicate"
                        severity="warning"
                        pTooltip="The host is duplicated in the configuration file and host database."
                    ></p-tag>
                </div>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="paginatorright" let-paginatorState>
        Total: {{ paginatorState.totalRecords | pluralize: 'host' }}
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <tr>
            <td colspan="6">
                No hosts found.
                <span *ngIf="hasFilter(hostsTable)">
                    Try to clear filtering.
                    <button
                        pButton
                        label="Clear"
                        class="p-button-outlined"
                        icon="pi pi-filter-slash"
                        (click)="clearFilters(hostsTable)"
                    ></button>
                </span>
            </td>
        </tr>
    </ng-template>
</p-table>
